<template>
  <!-- 这是首页商品页面 -->
  <div class="item">
    <div>
      <div class="item-img">
        <img
          :alt="item.spu.sku_info[currentIdx].title"
          :src="item.spu.sku_info[currentIdx].ali_image"
          style="opacity: 1;"
        />
      </div>
      <h6>{{item.spu.shop_info.spu_title}}</h6>
      <h3>{{item.spu.shop_info.spu_sub_title}}</h3>
      <div class="params-colors">
        <ul class="colors-list">
          <!-- 遍历小圆点 -->
          <li v-for="(each,i) in filterLists"
          :key="each.color_id">
            <a href="javascript:;" :class="{active:currentIdx==i}">
              <img
                :src="each.spec_json[0].image"
                @mouseover="currentIdx=i"
              />
            </a>
          </li>
        </ul>
      </div>
      <div class="item-btns clearfix">
        <span class="item-gray-btn">
          <!-- <a href="javascript:;" target="_blank">查看详情</a> -->
          <router-link :to="{'name':'productdetail','query':{'productid':item.spu.sku_info[currentIdx].sku_id}}">查看详情</router-link>
        </span>
        <span class="item-blue-btn" @click="addCart(item.spu.sku_info[currentIdx])">加入购物车</span>
      </div>
      <div class="item-price clearfix">
        <i>¥</i><span>{{item.spu.sku_info[currentIdx].price}}</span>
      </div>
      <div class="discount-icon">false</div>
      <div class="item-cover">
        <a href="javascript:;" target="_blank"></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
		item:Object
	},
  data(){
    return {
      currentIdx:0
    }
  },
  computed:{
    //找出有小圆点图片的列表
    filterLists(){
      return this.item.spu.sku_info.filter(item=>item.spec_json[0].image);
    }
  },
  methods:{
    //点击加入购物车
    addCart(obj){
      this.$store.commit("addCart",{productObj:obj,count:1})
      //显示或隐藏购物车
      this.$store.commit("showOrHideCart",{bool:true})
    },
  }
};
</script>

<style>
</style>